<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        p{
            text-align: center;
        }
        #reg{
            height: 160px;
            width: 180px;
            background-color: chocolate;
            position: absolute;
            left: 50%;
            margin-left: -80px;
            display: none;
        }
    </style>
</head>
<body>
    <p>点击此处，开始注册</p>
    <div id="reg">

    </div>
    <script>
        $(function(){
            $("p").click(function(){
                $("#reg").show();
            })
            $("#reg").mousedown(function(e){
                var x=e.clientX-$("#reg").position().left;
                var y=e.clientY-$("#reg").position().top;
                $(document).mousemove(function(e){
                    var left =e.clientX-x;
                    var right=e.clientY-y;
                    $('#reg').css("left",left+"px");
                    $("#reg").css("top",right+"px");
                })
                $(document).mouseup(function(){
                    $(this).unbind();
                })
            })
        })
    </script>
</body>
</html>